/**
 * 初始化变量
 */
var AfterSale = {
    dates: [],
    label: [],
    monthdates: [],
    monthlabel: [],
    yeardates: [],
    yearlabel: [],
    chart: null,
    imgData :'',
    type : 'png'
}
/**
 * 订单查询
 */
AfterSale.search = function () {
    removeData(AfterSale.chart);
    var time = $('beginTime').val();
    var ajax = new $ax(Feng.ctxPath + '/analysis/order', function (date) {
        AfterSale.dates = date.num;
        AfterSale.label = date.label;
        AfterSale.monthdates = date.monthnum;
        AfterSale.monthlabel = date.monthlabel;
        AfterSale.yeardates = date.yearnum;
        AfterSale.yearlabel = date.yearlabel;
        updateConfigByMutating(AfterSale.chart, date.num, date.label);
    }, function (data) {
        Feng.error('查询失败');
    });
    ajax.set('beginTime', time);
    ajax.start()
}

/**
 * 更新统计图
 */

function updateConfigByMutating(chart, num, lable) {

    $.each(lable, function (i, item) {
        chart.data.labels.push(item);
    });
    $.each(num, function (i, item) {
        chart.data.datasets[0].data.push(item);
    });
    chart.update();
}

/**
 * 去除统计图数据
 * @param chart
 */
function removeData(chart) {
    chart.data.labels.splice(0, chart.data.labels.length);
    chart.data.datasets[0].data.splice(0, chart.data.datasets[0].data.length);
    chart.update();
}

AfterSale.searchMonth=function () {
    removeData(AfterSale.chart);
    updateConfigByMutating(AfterSale.chart, AfterSale.monthdates, AfterSale.monthlabel);
}

AfterSale.searchYear=function () {
    removeData(AfterSale.chart);
    updateConfigByMutating(AfterSale.chart, AfterSale.yeardates, AfterSale.yearlabel);
}

AfterSale.savePic=function () {
    Feng.confirm("确认确认保存为图片？",function () {
        var canvas = document.getElementById("myChart");
        AfterSale.imgData = canvas.toDataURL(AfterSale.type);
        location = AfterSale.imgData;

        // 加工image data，替换mime type
        AfterSale.imgData = AfterSale.imgData.replace(_fixType(AfterSale.type),'image/octet-stream');

        // 下载后的问题名
        var filename = '订单统计图.' + AfterSale.type;
        // download
        saveFile(AfterSale.imgData,filename);
    });

}

/**
 * 获取mimeType
 * @param  {String} type the old mime-type
 * @return the new mime-type
 */
var _fixType = function(type) {
    type = type.toLowerCase().replace(/jpg/i, 'jpeg');
    var r = type.match(/png|jpeg|bmp|gif/)[0];
    return 'image/' + r;
};



/**
 * 在本地进行文件保存
 * @param  {String} data     要保存到本地的图片数据
 * @param  {String} filename 文件名
 */
var saveFile = function(data, filename){
    var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
    save_link.href = data;
    save_link.download = filename;

    var event = document.createEvent('MouseEvents');
    event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    save_link.dispatchEvent(event);
};


$(function () {
    /**
     * 默认从数据库获取当前这周的数据
     */
    var time = $('beginTime').val();
    var ajax = new $ax(Feng.ctxPath + '/analysis/order', function (date) {
        AfterSale.dates = date.num;
        AfterSale.label = date.label;
        AfterSale.monthdates = date.monthnum;
        AfterSale.monthlabel = date.monthlabel;
        AfterSale.yeardates = date.yearnum;
        AfterSale.yearlabel = date.yearlabel;
        updateConfigByMutating(AfterSale.chart, date.num, date.label);

    }, function (data) {
        Feng.error('查询失败');
    });
    ajax.set('beginTime', time);
    ajax.start();
    var datainfo = {
        labels: AfterSale.label,
        datasets: [{
            label: "订单数",
            backgroundColor: "rgba(54, 162, 235, 0.2)",
            borderColor: "rgba(54, 162, 235, 1)",
            borderWidth: 1,
            hoverBackgroundColor: "rgba(255,99,132,0.4)",
            hoverBorderColor: "rgba(255,99,132,1)",
            data: AfterSale.dates,
        }]
    };

    var options = {
        scaleOverride: false, //是否显示折线图的线条
        scaleShowLabels: false,//是否显示纵轴
        scaleShowGridLines: true,//是否显示坐标轴的标尺
        bezierCurve: true,//是否显示圆滑的效果
        pointDot: true,//是否显示折线图的顶点
        pointDotRadius: 3,//折线图定点大小
       // pointDotStrokeWidth: 1,//折线图定点外围大小
        //animation: true,//是否显示动画效果
        //animationSteps: 60,//图形显示的速度
        maintainAspectRatio: false,
        responsive: true,
        scales: {
            yAxes: [{
                stacked: true,
                gridLines: {
                    display: true,
                    color: "rgba(255,99,132,0.2)"
                }
            }],
            xAxes: [{
                gridLines: {
                    display: false
                }
            }]
        }
    };

    window.onload = function (ev) {
        var ctx = document.getElementById('myChart').getContext('2d');
        window.AfterSale.chart = new Chart(ctx, {
            type: 'line',
            options: options,
            data: datainfo
        });
    }
})

